<template>
  <div class="lc-root-container">
    <lc-search-panel
      :searchConfig="searchConfig"
      @columnRadioUpdate="columnRadioUpdate"
      @dragListUpdate="dragListUpdate"
      @handleSubmit="handleSubmit"
      @historyUpdate="historyUpdate"
      @handleReset="handleReset"
    >
      <template v-slot:searchBar>
        <el-form-item
          v-for="item in searchConfig.formList"
          :key="item.id"
          :label="item.name"
          :prop="item.alias"
          :class="[
            { 'form-item-width1': searchConfig.searchColumn == '1' },
            { 'form-item-width2': searchConfig.searchColumn == '2' },
            { 'form-item-width3': searchConfig.searchColumn == '3' },
            { 'form-item-width4': searchConfig.searchColumn == '4' },
          ]"
        >
          <el-input
            v-if="item.type == 'input'"
            v-model="item.value"
            placeholder="请输入..."
            clearable
          />
          <el-select
            v-if="item.type == 'select'"
            v-model="item.value"
            placeholder="请选择..."
          >
            <el-option label="选项一" value="001" />
          </el-select>
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="item.value"
            placeholder="请选择..."
          />
        </el-form-item>
      </template>
    </lc-search-panel>
  </div>
</template>

<script setup>
import { reactive } from "vue";

defineOptions({
  name: "Add9527",
});

// 配置页面ID
const pageId = "add9527";

const searchConfig = reactive({
  searchColumn: "3", // 搜索栏列数
  // form表单
  formList: [
    { name: "身份编码", id: 0, alias: "id", value: "", type: "input" },
    { name: "身份名称", id: 1, alias: "name", value: "", type: "input" },
    { name: "身份类型", id: 2, alias: "type", value: "", type: "select" },
    { name: "操作人", id: 3, alias: "user", value: "", type: "input" },
    {
      name: "筛选条件名称文字信息",
      id: 4,
      alias: "searchNameText",
      value: "",
      type: "input",
    },
    { name: "日期", id: 5, alias: "date", value: "", type: "date" },
  ],
  // 检索历史
  searchHistory: [
    { value: 0, label: "已保存的查询方案", type: "primary" },
    { value: 2, label: "已保存的查询", type: "primary" },
  ],
});

const formData = reactive([
  { name: "身份编码", id: 0, alias: "id", value: "", type: "input" },
  { name: "身份名称", id: 1, alias: "name", value: "", type: "input" },
  { name: "身份类型", id: 2, alias: "type", value: "", type: "select" },
  { name: "操作人", id: 3, alias: "user", value: "", type: "input" },
  {
    name: "筛选条件名称文字信息",
    id: 4,
    alias: "searchNameText",
    value: "",
    type: "input",
  },
  { name: "日期", id: 5, alias: "date", value: "", type: "date" },
]);

const columnRadioUpdate = (val) => {
  searchConfig.searchColumn = val;
};

const dragListUpdate = (val) => {
  searchConfig.formList = val;
};
const handleSubmit = () => {
  console.log("formList", searchConfig.formList);
  // 调用API，获取检索结果

  // 将检索内容存入，并更新 searchHistory
  searchConfig.searchHistory = [
    { value: 2, label: "查询一", type: "primary" },
    { value: 3, label: "查询方案", type: "primary" },
    { value: 4, label: "查询三", type: "primary" },
  ];
  setLocalStorage();
};

// 存入浏览器本地缓存
const setLocalStorage = () => {
  // 1. 获取页面id()
  console.log("pageId", pageId);
  // 2. 获取历史查询记录 - value(取这个字段)
  console.log("formList", searchConfig.formList);
  // 3. 获取条件顺序 - alias(取这个字段)
  console.log("formList", searchConfig.formList);
  // 4. 存入localStorage
  window.localStorage.setItem("key", "value");
};

const handleReset = () => {
  searchConfig.formList = JSON.parse(JSON.stringify(formData));
};

const historyUpdate = (val) => {
  searchConfig.searchHistory = searchConfig.searchHistory.filter(
    (item) => item.value != val.value,
  );
};
</script>
<style scoped>
.lc-root-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }

  .el-form-item .el-input:not(.el-pagination__editor),
  .el-form-item .el-select,
  .el-form-item .el-textarea,
  .el-form-item .el-date-editor,
  .el-form-item .el-input-number {
    width: 100%;
  }

  :deep(.el-form-item .el-date-editor) {
    width: 100%;
  }

  .form-item-width1 {
    /* 单列 */
    width: 90%;
  }
  .form-item-width2 {
    /* 两列 */
    width: 46%;
  }
  .form-item-width3 {
    /* 三列 */
    width: 30%;
  }
  .form-item-width4 {
    /* 四列 */
    width: 20%;
  }
}
</style>
